<template>
	<view class="page-container">
		<!-- 用户信息区域 -->
		<view class="user-profile-section">
			<image src="/static/user/user-bg.png" class="profile-bg-image"></image>
			<view class="profile-content">
				<view class="username-row">
					<view class="username">{{userInfo.username || '未登录'}}</view>
					<text class="edit-btn" @tap="showUsernameModal">编辑</text>
				</view>
				<view class="user-id">ID: {{userInfo.openid || '-'}}</view>
			</view>
		</view>
		
		<!-- 菜单列表 -->
		<view class="menu-list">
			<!-- 我的订单 -->
			<view class="menu-item" @tap="viewAllOrders">
				<view class="menu-icon">
					<image src="/static/user/my-order.png" class="icon-image"></image>
				</view>
				<text class="menu-title">我的订单</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<!-- 分隔线 -->
			<view class="menu-divider-container">
				<view class="menu-divider-line"></view>
			</view>
			
			<!-- 订单管理 -->
			<view class="menu-item" @tap="goToOrderManagement">
				<view class="menu-icon">
					<image src="/static/user/order-management.png" class="icon-image"></image>
				</view>
				<text class="menu-title">订单管理</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<!-- 分隔线 -->
			<view class="menu-divider-container">
				<view class="menu-divider-line"></view>
			</view>
			
			<!-- 权限管理 -->
			<view class="menu-item" @tap="showAdminModal">
				<view class="menu-icon">
					<image src="/static/user/admin-panel.png" class="icon-image"></image>
				</view>
				<text class="menu-title">权限管理</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<!-- 分隔线 -->
			<view class="menu-divider-container">
				<view class="menu-divider-line"></view>
			</view>
			
			<!-- 联系方式 -->
			<view class="menu-item" @tap="showContactModal">
				<view class="menu-icon">
					<image src="/static/user/contact.png" class="icon-image"></image>
				</view>
				<text class="menu-title">联系方式</text>
				<text class="menu-arrow">›</text>
			</view>
			
			<!-- 分隔线 -->
			<view class="menu-divider-container">
				<view class="menu-divider-line"></view>
			</view>
		</view>
		
		
		<!-- 修改用户名弹窗 -->
		<view class="modal-overlay" v-if="showModal" @tap="cancelEdit"></view>
		<view class="username-modal" v-if="showModal">
			<view class="modal-title">修改用户名</view>
			<input 
				class="username-input" 
				v-model="newUsername" 
				placeholder="请输入新用户名" 
				maxlength="20"
				type="nickname"
				@input="validateUsername"
			/>
			<view class="input-error" v-if="usernameError">{{usernameError}}</view>
			<view class="modal-buttons">
				<button class="cancel-btn" @tap="cancelEdit">取消</button>
				<button class="confirm-btn" @tap="updateUsername" :disabled="!isValidUsername || isUpdating">确认</button>
			</view>
		</view>
		
		<!-- 管理员权限管理弹窗 -->
		<view class="modal-overlay" v-if="showAdminPanel" @tap="closeAdminModal"></view>
		<view class="admin-modal" v-if="showAdminPanel">
			<view class="modal-title">权限管理</view>
			
			<view class="search-box">
				<input 
					class="search-input" 
					v-model="searchUsername" 
					placeholder="搜索用户名或ID" 
					@input="handleSearch"
				/>
				<button class="btn-outline search-btn" @tap="handleSearch">搜索</button>
			</view>
			
			<scroll-view scroll-y class="search-results-container">
				<view class="search-results" v-if="searchResults.length > 0">
					<view class="result-item" v-for="user in searchResults" :key="user.id">
						<view class="user-info">
							<view class="user-info-left">
								<text class="result-username">{{user.username}}</text>
								<view class="user-details">
									<text class="user-openid">ID: {{user.openid || '未知'}}</text>
								</view>
							</view>
						</view>
						<view class="role-actions">
							<button 
								class="btn-outline role-btn" 
								:class="{'active': user.role === 'admin'}"
								@tap="updateUserRole(user.id, 'admin')"
							>管理员</button>
							<button 
								class="btn-outline role-btn" 
								:class="{'active': user.role === 'employee'}"
								@tap="updateUserRole(user.id, 'employee')"
							>员工</button>
							<button 
								class="btn-outline role-btn" 
								:class="{'active': user.role === 'customer'}"
								@tap="updateUserRole(user.id, 'customer')"
							>客户</button>
							<button 
								class="btn-outline role-btn" 
								:class="{'active': user.role === 'none'}"
								@tap="updateUserRole(user.id, 'none')"
							>空</button>
						</view>
					</view>
				</view>
				
				<view class="empty-results" v-if="searchUsername && searchResults.length === 0">
					<text class="empty-text">未找到匹配的用户</text>
				</view>
			</scroll-view>
			
			<view class="modal-buttons">
				<button class="btn-outline close-btn" @tap="closeAdminModal">关闭</button>
			</view>
		</view>
		
		<!-- 联系方式弹窗 -->
		<view class="modal-overlay" v-if="showContact" @tap="closeContactModal"></view>
		<view class="contact-modal" v-if="showContact">
			<view class="modal-title">联系方式</view>
			
			<view class="contact-list">
				<view class="contact-item">
					<view class="contact-type">电话</view>
					<view class="contact-value clickable" @tap="copyPhone">
						{{contactInfo.phone}}
					</view>
				</view>
				
				
				<view class="contact-item">
					<view class="contact-type">邮箱</view>
					<view class="contact-value clickable" @tap="copyEmail">
						{{contactInfo.email}}
					</view>
				</view>
				
				<view class="contact-item">
					<view class="contact-type">地址</view>
					<view class="contact-value clickable" @tap="copyAddress">
						{{contactInfo.address}}
					</view>
				</view>
			</view>
			
			<view class="modal-buttons">
				<button class="btn-outline close-btn" @tap="closeContactModal">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import auth from '../../utils/auth.js';
	import { userApi, orderApi } from '../../api/index.js';
	
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				hasRecentOrders: false, // 是否有最近订单
				orderTypes: [
					{ name: '待付款', icon: '/static/user/unpaid.png', type: 'unpaid' },
					{ name: '待发货', icon: '/static/user/unshipped.png', type: 'unshipped' },
					{ name: '待收货', icon: '/static/user/unreceived.png', type: 'unreceived' },
					{ name: '待评价', icon: '/static/user/unrated.png', type: 'unrated' }
				],
				showModal: false,
				newUsername: '',
				usernameError: '',
				isValidUsername: false,
				isUpdating: false,
				// 新增管理员相关数据
				isAdmin: false,
				searchUsername: '',
				searchResults: [],
				recentOrders: [],
				// 新增管理员弹窗相关
				showAdminPanel: false,
				// 联系方式弹窗相关
				showContact: false,
				contactInfo: {
					phone: '18601098977',
					email: 'prepearl.beijing@outlook.com',
					address: '北京市朝阳区京广中心3502'
				}
			}
		},
		onShow() {
			auth.checkLogin();
			// 每次显示页面时检查登录状态并获取用户信息
			this.checkLoginStatus();
			
			// 获取最近订单
			this.getRecentOrders();
		},
		methods: {
			// 检查登录状态
			async checkLoginStatus() {
				try {
					// 检查是否已登录
					const access_token = uni.getStorageSync('access_token');
					if (!access_token) {
						this.isLogin = false;
						this.userInfo = {};
						this.isAdmin = false;
						return;
					}
					await this.getUserInfo();
					
					// 获取本地存储的用户信息
					const userInfo = uni.getStorageSync('userInfo');
					console.log(userInfo);
					
					if (userInfo) {
						this.isLogin = true;
						this.userInfo = userInfo;
						this.isAdmin = userInfo.role === 'admin';
						this.isStaff = (userInfo.role === 'employee' || userInfo.role === 'admin');
					} else {
						// 尝试从服务器获取用户信息
						await this.getUserInfo();
					}
				} catch (error) {
					console.error('检查登录状态失败', error);
					this.isLogin = false;
					this.userInfo = {};
					this.isAdmin = false;
				}
			},
			
			// 获取用户信息
			async getUserInfo() {
				try {
					const res = await userApi.getUserInfo();
					if (res && res.data) {
						this.isLogin = true;
						this.userInfo = res.data;
						// 更新本地存储
						uni.setStorageSync('userInfo', res.data);
					} else {
						this.isLogin = false;
						this.userInfo = {};
					}
				} catch (error) {
					console.error('获取用户信息失败', error);
					this.isLogin = false;
					this.userInfo = {};
				}
			},
			
			// 显示修改用户名弹窗
			showUsernameModal() {
				if (!this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				this.newUsername = this.userInfo.username || '';
				this.usernameError = '';
				this.isValidUsername = this.newUsername.length > 0;
				this.showModal = true;
			},
			
			// 取消编辑用户名
			cancelEdit() {
				this.showModal = false;
				this.newUsername = '';
				this.usernameError = '';
			},
			
			// 验证用户名
			validateUsername(e) {
				const username = this.newUsername.trim();
				
				if (!username) {
					this.usernameError = '用户名不能为空';
					this.isValidUsername = false;
				} else if (username.length < 2) {
					this.usernameError = '用户名至少需要2个字符';
					this.isValidUsername = false;
				} else if (username.length > 20) {
					this.usernameError = '用户名最多20个字符';
					this.isValidUsername = false;
				} else {
					this.usernameError = '';
					this.isValidUsername = true;
				}
			},
			
			// 更新用户名
			async updateUsername() {
				if (!this.isValidUsername || this.isUpdating) return;
				
				this.isUpdating = true;
				
				try {
					// 显示加载提示
					uni.showLoading({
						title: '更新中...',
						mask: true
					});
					
					// 调用API更新用户名
					const res = await userApi.updateUserInfo({
						username: this.newUsername.trim()
					});
					
					// 处理返回数据 - 后端直接返回更新后的用户对象，没有code字段
					if (res && (res.username || res.id)) {
						// 更新本地用户信息
						this.userInfo = res;
						uni.setStorageSync('userInfo', res);
						
						// 关闭弹窗
						this.showModal = false;
						
						// 显示成功提示
						uni.showToast({
							title: '用户名修改成功',
							icon: 'success'
						});
					} else {
						// 显示错误提示
						uni.showToast({
							title: '更新失败，请重试',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新用户名失败', error);
					uni.showToast({
						title: '更新失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
					this.isUpdating = false;
				}
			},
			
			// 前往登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			},
			
			// 获取最近订单
			async getRecentOrders() {
				// 如果未登录，不获取订单
				if (!this.isLogin) {
					this.hasRecentOrders = false;
					return;
				}
				
				try {
					// 调用API获取最近订单
					const res = await orderApi.getOrderList({
						page: 1,
						limit: 5, // 只显示最近5条订单
						status: 'all' // 显示所有状态的订单
					});

					console.log(res);
					
					if (res.code === 200 && res.data.items.length > 0) {
						this.hasRecentOrders = true;
						this.recentOrders = res.data.items;
					} else {
						this.hasRecentOrders = false;
					}
				} catch (error) {
					console.error('获取最近订单失败', error);
					this.hasRecentOrders = false;
				}
			},
			
			viewAllOrders() {
				// 检查登录状态
				if (!this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.goToLogin();
					}, 1500);
					return;
				}
				
				// 导航到完整订单列表页面
				uni.navigateTo({
					url: '/pages/order/order-list'
				});
			},
			
			viewOrders(type) {
				// 检查登录状态
				if (!this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.goToLogin();
					}, 1500);
					return;
				}
				
				// 导航到指定类型的订单列表
				uni.navigateTo({
					url: `/pages/order/order-list?type=${type}`
				});
			},
			
			goShopping() {
				// 跳转到商品列表页
				uni.switchTab({
					url: '/pages/list/list'
				});
			},
			
			viewOrderDetail(orderId) {

				// 检查登录状态
				if (!this.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.goToLogin();
					}, 1500);
					return;
				}
				
				// 导航到订单详情页面
				uni.navigateTo({
					url: `/pages/order/confirmation?orderId=${orderId}`
				});
			},
			
			getOrderStatusText(status) {
				// 根据订单状态返回相应的文本
				switch (status) {
					case 'unpaid':
						return '待付款';
					case 'unshipped':
						return '待发货';
					case 'unreceived':
						return '待收货';
					case 'unrated':
						return '待评价';
					default:
						return '未知状态';
				}
			},
			formatDate(dateStr) {
				// 将日期字符串格式化为更友好的格式，包含时分秒
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 搜索用户
			async handleSearch() {
				if (!this.searchUsername.trim()) {
					this.searchResults = [];
					return;
				}
				
				try {
					console.log('开始搜索用户:', this.searchUsername.trim());
					const res = await userApi.searchUsers({
						username: this.searchUsername.trim()
					});
					
					console.log('搜索用户返回结果:', res);
					
					if (res.code === 200) {
						this.searchResults = res.data.items;
						console.log('搜索结果:', this.searchResults);
					} else {
						console.error('搜索用户失败:', res.message);
						uni.showToast({
							title: res.message || '搜索失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('搜索用户失败，详细错误:', error);
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none'
					});
				}
			},
			
			// 更新用户角色
			async updateUserRole(userId, role) {
				try {
					uni.showLoading({
						title: '更新中...',
						mask: true
					});
					
					const res = await userApi.updateUserRole(userId, role);
					
					if (res.code === 200) {
						// 更新本地搜索结果
						const user = this.searchResults.find(u => u.id === userId);
						if (user) {
							user.role = role;
						}
						
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.message || '更新失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新用户角色失败', error);
					uni.showToast({
						title: '更新失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			
			// 获取角色文本
			getRoleText(role) {
				switch (role) {
					case 'admin':
						return '管理员';
					case 'employee':
						return '员工';
					case 'customer':
						return '客户';
					case 'none':
						return '空';
					default:
						return '未知';
				}
			},
			
			// 显示管理员弹窗
			showAdminModal() {
				if (!this.isAdmin) {
					uni.showToast({
						title: '无权限访问',
						icon: 'none'
					});
					return;
				}
				
				this.searchUsername = '';
				this.searchResults = [];
				this.showAdminPanel = true;
			},
			
			// 关闭管理员弹窗
			closeAdminModal() {
				this.showAdminPanel = false;
				this.searchUsername = '';
				this.searchResults = [];
			},
			
			// 管理功能相关方法
			goToOrderManagement() {
				uni.navigateTo({
					url: '/pages/admin/order-management'
				});
			},
			
			goToProductManagement() {
				uni.navigateTo({
					url: '/pages/admin/product-management'
				});
			},
			
			goToStatistics() {
				uni.navigateTo({
					url: '/pages/admin/statistics'
				});
			},
			
			// 显示联系方式弹窗
			showContactModal() {
				this.showContact = true;
			},
			
			// 关闭联系方式弹窗
			closeContactModal() {
				this.showContact = false;
			},
			
			// 复制电话号码
			copyPhone() {
				uni.setClipboardData({
					data: this.contactInfo.phone,
					success: () => {
						uni.showToast({
							title: '电话已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 复制微信号
			copyWechat() {
				uni.setClipboardData({
					data: this.contactInfo.wechat,
					success: () => {
						uni.showToast({
							title: '微信号已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 复制邮箱
			copyEmail() {
				uni.setClipboardData({
					data: this.contactInfo.email,
					success: () => {
						uni.showToast({
							title: '邮箱已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 复制地址
			copyAddress() {
				uni.setClipboardData({
					data: this.contactInfo.address,
					success: () => {
						uni.showToast({
							title: '地址已复制',
							icon: 'success'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.page-container {
		min-height: 100vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}
	
	/* Header bar styles */
	.header-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: normal;
		color: #000000;
	}
	
	.header-actions {
		display: flex;
		align-items: center;
	}
	
	.header-dot {
		font-size: 36rpx;
		margin-right: 20rpx;
	}
	
	.header-circle {
		font-size: 40rpx;
	}
	
	/* User profile section */
	.user-profile-section {
		position: relative;
		width: 100%;
		height: 200rpx; /* Set an appropriate height for the header */
		overflow: hidden;
	}
	
	.profile-bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.profile-content {
		position: relative;
		z-index: 2;
		padding: 40rpx 30rpx;
		height: 100%;
		box-sizing: border-box;
	}
	
	.username-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.username {
		font-size: 36rpx;
		color: #ffffff;
		text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	}
	
	.user-id {
		font-size: 28rpx;
		color: #ffffff;
		opacity: 0.7;
		text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	}
	
	.edit-btn {
		font-size: 26rpx;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0);
		padding: 2rpx 20rpx;
		border-radius: 0rpx;
		border: 1rpx solid #ffffff;
		z-index: 3;
	}
	
	/* Menu list styles */
	.menu-list {
		background-color: #ffffff;
		flex: 1;
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #ffffff;
	}
	
	.menu-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.icon-image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.menu-title {
		flex: 1;
		font-size: 30rpx;
		color: #000000;
		font-weight: normal;
	}
	
	.menu-arrow {
		font-size: 36rpx;
		color: #999999;
	}
	
	.menu-divider {
		display: none;
	}
	
	.menu-divider-container {
		padding: 0 30rpx;
		height: 2rpx;
		display: flex;
		align-items: center;
	}
	
	.menu-divider-line {
		background-color: #666666;
		height: 1rpx;
		width: 100%;
		opacity: 0.3;
		box-shadow: 0 0.5rpx 0 rgba(0,0,0,0.05);
	}
	
	/* Bottom section */
	.bottom-hint {
		padding: 20rpx 30rpx;
		text-align: center;
	}
	
	.hint-text {
		font-size: 26rpx;
		color: #ff0000;
	}
	
	/* Tab bar styles */
	.tab-bar {
		display: flex;
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1px solid #eeeeee;
	}
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999999;
	}
	
	.tab-item.active {
		color: #000000;
	}
	
	.tab-icon {
		font-size: C32rpx;
		margin-bottom: 4rpx;
	}
	
	.tab-text {
		font-size: 24rpx;
	}
	
	/* Modal styles - keeping existing styles */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}
	
	.username-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 85%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		z-index: 101;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	
	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: #333;
	}
	
	.username-input {
		width: 100%;
		height: 90rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
		margin-bottom: 20rpx;
	}
	
	.input-error {
		color: #333;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		padding: 0 10rpx;
	}
	
	.modal-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.cancel-btn, .confirm-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	
	.cancel-btn {
		background-color: #fff;
		color: #333;
		border: 1rpx solid #333;
	}
	
	.confirm-btn {
		background-color: #282828;
		color: #fff;
	}
	
	.confirm-btn[disabled] {
		background-color: rgba(243, 178, 80, 0.5);
		color: #fff;
		opacity: 0.6;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.search-input {
		flex: 1;
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #f9f9f9;
		margin-right: 20rpx;
	}
	
	.search-btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		width: 120rpx;
		background-color: #282828;
		color: #fff;
	}
	
	
	.search-results-container {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100%;
	}
	
	.search-results {
		padding: 10rpx 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	.result-item {
		background-color: #fff;
		border-radius: 0;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		border: 1px solid #dcc8a5;
		width: 100%;
		box-sizing: border-box;
	}
	
	.user-info {
		display: flex;
		flex-direction: column;
		margin-bottom: 15rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.user-info-left {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.user-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10rpx;
		margin-top: 10rpx;
	}
	
	.result-username {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
	}
	
	.user-openid {
		font-size: 22rpx;
		color: #666;
	}
	
	.current-role {
		font-size: 22rpx;
		color: #333;
		background-color: #f5f5f5;
		padding: 2rpx 8rpx;
		border-radius: 0;
		border: 1px solid #dcc8a5;
	}
	
	.role-actions {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
		gap: 6rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.role-btn {
		flex: 1;
		min-width: 50rpx;
		padding: 0;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0;
	}
	
	.role-btn.active {
		background-color: #282828;
		color: #fff;
		border: 1.5px solid #dcc8a5;
	}
	
	.modal-buttons {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
	}
	
	.close-btn {
		width: 250rpx;
		margin: 0;
	}
	
	.empty-results {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 40rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #333;
		margin-top: 20rpx;
	}
	
	.admin-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 650rpx;
		height: 80%;
		background-color: #fff;
		border-radius: 0;
		z-index: 101;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid #282828;
	}
	
	.modal-title {
		background-color: #282828;
		color: #fff;
		padding: 26rpx;
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
	}
	
	.search-box {
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;
	}
	
	
	
	.search-results-container {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 20rpx;
	}
	
	.search-results {
		padding: 20rpx 0;
	}
	
	.result-item {
		background-color: #fff;
		border-radius: 0;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		border: 1px solid #dcc8a5;
	}
	
	.result-item:last-child {
		margin-bottom: 0;
	}
	
	.contact-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 650rpx;
		background-color: #fff;
		border-radius: 0;
		z-index: 101;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid #282828;
	}
	
	.contact-list {
		padding: 30rpx 20rpx;
	}
	
	.contact-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}
	
	.contact-item:last-child {
		border-bottom: none;
	}
	
	.contact-type {
		width: 100rpx;
		font-size: 28rpx;
		color: #282828;
		font-weight: bold;
	}
	
	.contact-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding: 0 20rpx;
	}
	
	.contact-value.clickable {
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;
		border-bottom: 1px dashed #dcc8a5;
		padding-bottom: 6rpx;
	}
	
	.contact-action-hint {
		font-size: 22rpx;
		color: #999;
		margin-left: 20rpx;
	}
	
	.contact-modal .modal-title {
		background-color: #282828;
		color: #fff;
		border-bottom: none;
	}
</style> 